<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="../../js/common.js"></script>
		<script type="text/javascript" src="../../js/config.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				touch-action: none;
			}

			body {
				background: #333333;
				color: #fff;
				
			}

			.iconfont {
				font-size: 14vw;
			}

			.head {
				color: #007AFF;
				width: 100vw;
				height: 6vh;
				float: left;
				background: #000000;
				font-size: 6vw;
				line-height: 6vh;
				text-align: center;
				position: fixed;
				z-index: 99;
				box-shadow:inset 0 0 10px #0f0;
				border: #007AFF 1px solid;

			}
			.auto {
				box-shadow:inset 0 0 10px #0f0;
				padding: 2vw;
				margin-top: 7vh;
				border: #007AFF 1px solid;
				border-radius: 2vw;
			}
			.mui-slider {
				height: 55vw;
			}

			.mui-slider-item img {
				border-radius: 2vw;
				width: 100vw;
				height: 55vw;
			}

			.mui-content {
				background: #333333;
				margin: 0vw auto;
				width: 100vw;

			}

			.mui-content li {
				box-shadow:inset 0 0 10px #0f0;
				background: #000;
				margin: 3vw auto;
				font-size: 5vw;
				padding: 3vw;
				margin: 2vw;
				border-radius: 3vw;
				color: #007AFF;
				border: #007AFF 1px solid;
				text-align: center;
				list-style-type: none;
				height: 20vw;
				line-height: 12vw;
			}
		</style>
	</head>
	<body>
		<header class="head">
			图像识别
		</header>
		<div class="mui-scroll-wrapper">
			<div class="mui-scroll">
		<div class="auto">
		<div class="mui-slider" style="">
			<div class="mui-slider-group mui-slider-loop">
				<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../../images/slider4.jpeg" /></a></div>
				<div class="mui-slider-item"><a href="#"><img src="../../images/slider1.jpeg" /></a></div>
				<div class="mui-slider-item"><a href="#"><img src="../../images/slider2.jpeg" /></a></div>
				<div class="mui-slider-item"><a href="#"><img src="../../images/slider3.jpg" /></a></div>
				<div class="mui-slider-item"><a href="#"><img src="../../images/slider4.jpeg" /></a></div>
				<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../../images/slider1.jpeg" /></a></div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		</div>
		
				<!--这里放置真实显示的DOM内容-->
				<div class="mui-content">
					<div class="mui-row">
						<div class="mui-col-sm-12 mui-col-xs-12">
							<li class="mui-table-view-cell recog" id="advancedGeneral">
								<span class="mui-icon iconfont" style="width: 2vw; height: 2vw; float: left;">&#xe630;</span>
								<span class="mui-navigate-right">
									通用物体和场景识别
								</span>
							</li>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6">
							<li class="mui-table-view-cell recog" id="animal">
								<span class="mui-icon iconfont" style="width: 2vw; height: 2vw; float: left;">&#xe62e;</span>
								<span class="mui-navigate-right">
									动物
								</span>
							</li>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6">
							<li class="mui-table-view-cell recog" id="plant">
								<span class="mui-icon iconfont" style="width: 2vw; height: 2vw; float: left;">&#xe600;</span>
								<span class="mui-navigate-right">
									植物
								</span>
							</li>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6">
							<li class="mui-table-view-cell recog" id="logo">
								<span class="mui-icon iconfont" style="width: 2vw; height: 2vw; float: left;">&#xe68f;</span>
								<span class="mui-navigate-right">
									logo
								</span>
							</li>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6">
							<li class="mui-table-view-cell recog" id="ingredient">
								<span class="mui-icon iconfont" style="width: 2vw; height: 2vw; float: left;">&#xe664;</span>
								<span class="mui-navigate-right">
									果蔬
								</span>
							</li>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6">
							<li class="mui-table-view-cell recog" id="dish">
								<span class="mui-icon iconfont" style="width: 2vw; height: 2vw; float: left;">&#xe64c;</span>
								<span class="mui-navigate-right">
									菜品
								</span>
							</li>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6">
							<li class="mui-table-view-cell recog" id="redWine">
								<span class="mui-icon iconfont" style="width: 2vw; height: 2vw; float: left;">&#xf34b;</span>
								<span class="mui-navigate-right">
									红酒
								</span>
							</li>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6">
							<li class="mui-table-view-cell recog" id="currency">
								<span class="mui-icon iconfont" style="width: 2vw; height: 2vw; float: left;">&#xe682;</span>
								<span class="mui-navigate-right">
									货币
								</span>
							</li>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6">
							<li class="mui-table-view-cell recog" id="landmark">
								<span class="mui-icon iconfont" style="width: 2vw; height: 2vw; float: left;">&#xe6bc;</span>
								<span class="mui-navigate-right">
									地标
								</span>
							</li>
						</div>
					</div>
				</div>

			</div>
		</div>
	</body>
<script src="../../js/app.js"></script>
	<script>
		var url = null,
			filePath = "";
		options = {
			scrollY: true, //是否竖向滚动
			scrollX: false, //是否横向滚动
			startX: 0, //初始化时滚动至x
			startY: 0, //初始化时滚动至y
			indicators: true, //是否显示滚动条
			deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
			bounce: true //是否启用回弹
		}
		mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		});
		var gallery = mui('.mui-slider');
		gallery.slider({
			interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
		});

		function plusReady() {
			var class_btn = document.getElementsByClassName('recog');
			for (var a = 0; a < class_btn.length; a++) {
				class_btn[a].addEventListener('tap', function() {
					if (this.id == "advancedGeneral") {
						mui.toast('通用物品与场景识别', {
							duration: 'long',
							type: 'div'
						})
						// url = local + "/imageRecognition/getAdvancedGeneral";
						url =  app.getUrl() + "imageRecognition/getAdvancedGeneral";
						localStorage.setItem('url', url);
						page.imgUp();
						url = "";
						filePath = "";
					}
					if (this.id == "animal") {
						console.log("www")
						mui.toast('动物识别', {
							duration: 'long',
							type: 'div'
						})
						url = app.getUrl() +  "imageRecognition/getAnimal";
						localStorage.setItem('url', url);
						page.imgUp();
						url = "";
						filePath = "";
					}
					if (this.id == "plant") {
						mui.toast('植物识别', {
							duration: 'long',
							type: 'div'
						})
						url = app.getUrl() + "imageRecognition/getPlant";
						localStorage.setItem('url', url);
						page.imgUp();
						url = "";
						filePath = "";
					}
					if (this.id == "logo") {
						mui.toast('logo识别', {
							duration: 'long',
							type: 'div'
						})
						url = app.getUrl()  + "imageRecognition/getLogo";
						localStorage.setItem('url', url);
						page.imgUp();
						url = "";
						filePath = "";
					}
					if (this.id == "ingredient") {
						mui.toast('果蔬识别', {
							duration: 'long',
							type: 'div'
						}) 
						url = app.getUrl()  + "imageRecognition/getIngredient";
						localStorage.setItem('url', url);
						page.imgUp();
						url = "";
						filePath = "";
					}
					if (this.id == "dish") {
						mui.toast('菜品识别', {
							duration: 'long',
							type: 'div'
						})
						url = app.getUrl()  + "imageRecognition/getDish";
						localStorage.setItem('url', url);
						page.imgUp();
						url = "";
						filePath = "";
					}
					if (this.id == "redWine") {
						mui.toast('红酒识别', {
							duration: 'long',
							type: 'div'
						})
						url = app.getUrl()  + "imageRecognition/getRedWine";
						filePath = localStorage.getItem("path");
						page.imgUp();
						localStorage.setItem('url', url);
						url = "";
						filePath = "";
					}
					if (this.id == "currency") {
						mui.toast('货币识别', {
							duration: 'long',
							type: 'div'
						})
						url = app.getUrl()  + "imageRecognition/getCurrency";
						localStorage.setItem('url', url);
						page.imgUp();
						filePath = localStorage.getItem("path");
						url = "";
						filePath = "";
					}
					if (this.id == "landmark") {
						mui.toast('地标识别', {
							duration: 'long',
							type: 'div'
						})
						url = app.getUrl()  + "imageRecognition/getLandmark";
						localStorage.setItem('url', url);
						page.imgUp();
						url = "";
						filePath = "";
					}
				})
			}
		}
		var page = null;
		page = {
			imgUp: function() {
				var m = this;
				/* console.log(m);*/
				plus.nativeUI.actionSheet({
					cancel: "取消",
					buttons: [{
							title: "拍照"
						},
						{
							title: "从相册中选择"
						}
					]
				}, function(e) { //1 是拍照  2 从相册中选择
					switch (e.index) {
						case 1:
							appendByCamera();
							break;
						case 2:
							appendByGallery();
							break;
					}
				});
			}
		}

		// 拍照添加文件
		function appendByCamera() {
			var cmr = plus.camera.getCamera();
			cmr.captureImage(function(path) {
				plus.io.resolveLocalFileSystemURL(path, function(entry) {
					var w = null;
					url = localStorage.getItem("url");
					insertPhoto(url, entry.toLocalURL());
				}, function(e) {
					outLine('读取拍照文件错误：' + e.message);
				});
			});
		}
		// 从相册添加文件
		function appendByGallery() {
			plus.gallery.pick(function(a) {
				plus.io.resolveLocalFileSystemURL(a, function(entry) {
					//entry为图片原目录（相册）的句柄
					url = localStorage.getItem("url");
					insertPhoto(url, entry.toLocalURL());

				}, function(e) {
					console.log("读取图片错误：" + e.message);
				});
			}, function(a) {}, {
				filter: "image"
			})
		}

		function insertPhoto(url, data) {
			var imgClass; 
			var dataURL;
			var img = new Image();
			img.setAttribute('crossOrigin', 'anonymous');
			img.src = data;
			console.log(data)
			img.onload = function() {
				
				//创建canvas画布
				var canvas = document.createElement("canvas");
				//在css中不要直接给img设置宽高,否则此处会获取到css设置的值
				var width = img.width;
				var height = img.height;
				//比较图片宽高设置图片显示和canvas画布尺寸
				if (width > height) {
					imgClass = 'height';
					if (width > 500) {
						height = Math.round(height *= 500 / width);
						width = 500;
					}
				} else {
					imgClass = 'width';
					if (height > 500) {
						width = Math.round(width *= 500 / height);
						height = 500;
					}
				}
				canvas.width = width; //设置新的图片的宽度
				canvas.height = height; //设置新的图片的长度
				var ctx = canvas.getContext("2d");
				ctx.drawImage(img, 0, 0, width, height); //绘图
				dataURL = canvas.toDataURL("image/png", ""); //供img标签使用的src路径
			console.log(url)
				var sendData = {
					'image64': dataURL
				}
				mui.ajax(url, {
					type: 'POST',
					dataType: 'json',
					contentType: "application/json;charset=UTF-8",
					data: sendData,
					async: true,
					timeout: 100000, //超时时间设置为10秒；
					beforeSend: function() {
						plus.nativeUI.showWaiting("识别中...", "options");
						mask.show();
					},
					complete: function() {
							plus.nativeUI.closeWaiting();
							mask.close(); //关闭遮罩层
						},
					success: function(res) {
						if (res.errCode === "000000") {
							 console.log(res.data.id);
							if (res.data.childRespVos != undefined && res.data.childRespVos.length > 0) {
								localStorage.setItem("data", JSON.stringify(res.data));
								var html = 'recoginition-message.html';
								w = plus.webview.create(html, html, {
									hardwareAccelerated: true,
									scrollIndicator: 'none', 
									scalable: true,
									bounce: 'all'
								});
								w.show('pop-in');
							} else {
								mui.toast('识别失败，请更换图片重试!', {
									duration: 'long',
									type: 'div'
								})
							}
						}
					},
				});
			}

		}
		//扩展API是否准备好，如果没有准备好则监听plusReady
		if (window.plus) {
			plusReady();
		} else {
			document.addEventListener("plusready", plusReady, false);
		}
	</script>
</html>
